<template>
  <div class="flex flex-col">
    <div class="flex justify-between items-center">
      <a-breadcrumb>
        <a-breadcrumb-item>助理管理</a-breadcrumb-item>
        <a-breadcrumb-item>基础信息</a-breadcrumb-item>
      </a-breadcrumb>
      <a-button class="border-none" icon="rollback" @click="rollback">返回列表</a-button>
    </div>
    <a-card
      class="min-h-[68px] rounded my-[10px]"
      :body-style="{padding: '12px 30px', height:'100%'}"
      :bordered="false"
    >
      <div class="flex justify-between items-center mb-2">
        <div class="text-base text-black font-bold">助理信息</div>
        <div>
          <!-- <a-button type="primary">解绑/绑定医生</a-button> -->
          <a-popconfirm title="确认注销此助理？" @confirm="destory">
            <a-button type="primary" class="ml-3" :disabled="assistantDetail.UserDestory==2">助理注销</a-button>
          </a-popconfirm>
        </div>
      </div>
      <div class="grid pb-2 grid-cols-2 lg:grid-cols-3 gap-1">
        <div class="pt-[15px] bg-white">助理ID: {{assistantDetail.UserId}}</div>
        <div class="pt-[15px] bg-white">助理姓名: {{assistantDetail.UserName}}</div>
        <div class="pt-[15px] bg-white">归属: {{assistantDetail.build}}</div>
        <div class="pt-[15px] bg-white">手机号: {{assistantDetail.UserPhone}}</div>
        <div
          class="pt-[15px] bg-white"
        >推荐达成率: {{Math.floor(assistantDetail.trueCount/(assistantDetail.count?assistantDetail.count:1)*100) }}%</div>
        <div class="pt-[15px] bg-white">推荐次数: {{assistantDetail.count}}次</div>
      </div>
    </a-card>
    <a-row :gutter="12">
      <a-col :lg="24" :xl="16">
        <div class="flex justify-between items-center">
          <a-breadcrumb>
            <a-breadcrumb-item>助理管理</a-breadcrumb-item>
            <a-breadcrumb-item>医生 & 业绩</a-breadcrumb-item>
          </a-breadcrumb>
          <div>
            <a-button v-if="selectedKeys[0]==0" type="primary" @click="bindDocter">绑定医生</a-button>
          </div>
        </div>
        <a-card
          class="min-h-[400px] h-full rounded my-[10px] overflow-x-auto"
          :body-style="{padding: '12px', height:'100%'}"
          :bordered="false"
        >
          <a-menu
            mode="horizontal"
            :selectedKeys="selectedKeys"
            type="inner"
            class="bg-transparent mb-2"
            @select="menuChange"
          >
            <template v-for="item in manageList">
              <a-menu-item :key="item.key">{{item.title}}</a-menu-item>
            </template>
          </a-menu>
          <a-table
            ref="table"
            size="small"
            class="h-full"
            :columns="columnsArr[selectedKeys[0]]"
            :dataSource="list"
            :pagination="pagination"
            @change="tableChange"
            :loading="listLoading"
            :rowKey="(record,index)=>{return index}"
          >
            <template slot="YtOrderPayStatus" slot-scope="text, record">
              <span>{{statuslList[text?text-1:0].label||''}}</span>
            </template>
            <template slot="PatientCount" slot-scope="text, record">{{text}}人</template>
            <template slot="PriceCount" slot-scope="text, record">{{text}}元</template>
            <template slot="UserStatus" slot-scope="text, record">
              <span>{{text==1?'启用':'禁用'}}</span>
            </template>
            <template slot="YtOrderUserBalance" slot-scope="text,record">{{text}}元</template>
            <template slot="action" slot-scope="text, record">
              <a-popconfirm title="确认解绑该医生?" @confirm="delAssistant(record.UserId)">
                <a-button type="link" block>解绑</a-button>
              </a-popconfirm>
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :lg="24" :xl="8">
        <a-breadcrumb>
          <a-breadcrumb-item>助理管理</a-breadcrumb-item>
          <a-breadcrumb-item>生命周期</a-breadcrumb-item>
        </a-breadcrumb>
        <a-card
          class="min-h-[300px] h-full rounded my-[10px]"
          :body-style="{padding: '20px 12px', height:'100%'}"
          :bordered="false"
        >
          <a-timeline
            v-if="timeline.length>0"
            class="min-h-[130px] max-h-[500px] overflow-y-auto pt-2"
          >
            <template v-for="item in timeline">
              <a-timeline-item>
                <p>{{item.StlCreatetime}}</p>
                <p class="font-bold">{{item.StlTitle}}</p>
                <p>{{item.StlInfo}}</p>
              </a-timeline-item>
            </template>
          </a-timeline>
          <div v-else class="flex-1 flex justify-center items-center">
            <a-empty />
          </div>
        </a-card>
      </a-col>
    </a-row>
    <bind-docter ref="bindDocter" @succeed="init" />
  </div>
</template>

<script>
import {
  getAssistantDetail,
  bindDocterList,
  getAssistantShare,
  delDoctorAssistant,
  getTimeline,
  destoryDocter,
} from '@/api/index'
import BindDocter from './components/bindDocter.vue'
const columnsArr = [
  [
    {
      title: '姓名',
      dataIndex: 'UserName',
      align: 'center',
      scopedSlots: { customRender: 'UserName' },
    },
    {
      title: '第一执业医院',
      dataIndex: 'DftTagName',
      align: 'center',
      scopedSlots: { customRender: 'DftTagName' },
    },
    {
      title: '科室',
      dataIndex: 'DiDepartment',
      align: 'center',
      scopedSlots: { customRender: 'DiDepartment' },
    },
    {
      title: '医生患者数',
      dataIndex: 'PatientCount',
      align: 'center',
      scopedSlots: { customRender: 'PatientCount' },
    },
    {
      title: '医生营业额',
      dataIndex: 'PriceCount',
      align: 'center',
      scopedSlots: { customRender: 'PriceCount' },
    },
    {
      title: '状态',
      dataIndex: 'UserStatus',
      align: 'center',
      scopedSlots: { customRender: 'UserStatus' },
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      width: '120px',
      scopedSlots: { customRender: 'action' },
    },
  ],
  [
    {
      title: '订单ID',
      className: 'min-w-80p',
      dataIndex: 'Id',
      align: 'center',
      ellipsis: true,
      scopedSlots: { customRender: 'Id' },
    },
    {
      title: '创建时间',
      className: 'min-w-120p',
      dataIndex: 'AsrCreatetime',
      align: 'center',
      scopedSlots: { customRender: 'AsrCreatetime' },
    },
    {
      title: '成交时间',
      className: 'min-w-120p',
      dataIndex: 'YtOrderUpdatetime',
      align: 'center',
      ellipsis: true,
      scopedSlots: { customRender: 'YtOrderUpdatetime' },
    },

    {
      title: '商品名称',
      className: 'min-w-150p',
      dataIndex: 'YtOrderName',
      align: 'center',
      ellipsis: true,
      scopedSlots: { customRender: 'YtOrderName' },
    },
    {
      title: '状态',
      className: 'min-w-90p',
      dataIndex: 'YtOrderPayStatus',
      align: 'center',
      ellipsis: true,
      scopedSlots: { customRender: 'YtOrderPayStatus' },
    },
    {
      title: '销售金额',
      className: 'min-w-90p',
      dataIndex: 'YtOrderUserBalance',
      align: 'center',
      ellipsis: true,
      scopedSlots: { customRender: 'YtOrderUserBalance' },
    },
    {
      title: '用户信息',
      className: 'min-w-90p',
      dataIndex: 'UserName',
      align: 'center',
      ellipsis: true,
      scopedSlots: { customRender: 'UserName' },
    },
    {
      title: '订单来源',
      className: 'min-w-90p',
      dataIndex: 'sourceName',
      align: 'center',
      ellipsis: true,
      scopedSlots: { customRender: 'sourceName' },
    },
  ],
]

export default {
  components: { BindDocter },
  data() {
    return {
      columnsArr,
      manageList: [
        {
          key: 0,
          title: '医生列表',
        },
        {
          key: 1,
          title: '业绩列表',
        },
      ],
      selectedKeys: [0],
      /**分页 */
      pagination: {
        current: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
        showTotal: (total) => ` ${total} 条数据`,
      },
      /**table数据 */
      list: [],
      statuslList: [
        { label: '待支付', value: 1 },
        { label: '已支付', value: 2 },
        { label: '赠送/免费', value: 3 },
        { label: '整单退款', value: 4 },
        { label: '部分退款', value: 5 },
      ],
      //表格Loading
      listLoading: false,
      assistantDetail: {},
      timeline: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const id = this.$route.query.id
      const { data: detail } = await getAssistantDetail({ id })
      const { data: timeline } = await getTimeline({ uid: id, pageSize: 10000 })
      this.assistantDetail = detail
      this.timeline = [...timeline.Lists]
      this.menuChange({ key: this.selectedKeys[0] })
    },
    menuChange({ key }) {
      this.selectedKeys[0] = key
      this.pagination.current = 1
      this.getList()
    },
    //分页
    tableChange(pagination) {
      this.pagination = pagination
      this.getList()
    },
    /**
     * 获取列表
     */
    async getList() {
      this.listLoading = true
      const { current, pageSize } = this.pagination
      const params = {
        ...{ page: current, pageSize },
        assistantId: this.assistantDetail.UserId,
      }
      try {
        let request
        switch (this.selectedKeys[0]) {
          case 0:
            request = await bindDocterList(params)
            break
          case 1:
            request = await getAssistantShare(params)
            break
        }
        const { data } = request
        const { Page, PageSize, Total, Lists } = data
        this.list = Lists || []
        this.pagination = {
          current: Page,
          pageSize: PageSize,
          total: Total,
        }
      } catch (error) {
        this.list = []
        this.$message.error(error)
      } finally {
        this.listLoading = false
      }
    },
    bindDocter() {
      const id = this.assistantDetail.UserId
      this.$refs.bindDocter.open(id)
    },
    async destory() {
      const id = this.assistantDetail.UserId
      try {
        await destoryDocter({ id })
        this.$message.success('操作成功！')
        this.init()
      } catch (error) {
        this.$message.error(error)
      }
    },
    async delAssistant(doctorId) {
      try {
        const assistantId = this.assistantDetail.UserId
        await delDoctorAssistant({ assistantId, doctorId })
        this.$message.success('操作成功！')
        this.init()
      } catch (error) {
        this.$message.error(error)
      }
    },
    rollback() {
      this.$router.go(-1)
    },
  },
}
</script> 
